<script type="text/x-template" id="cc-key-value-template">
    <div>
        <template v-if="bulkEdit">
            <el-button
                    size="mini"
                    type="success"
                    @click="handleKeyValueEdit()">Key-Value Edit
            </el-button>
            <el-input
                    type="textarea"
                    :rows="6"
                    placeholder="请输入Key:Value"
                    v-model="data"
                    clearable
                    @change="handleChange()"
            >
            </el-input>
        </template>
        <template v-if="keyValueEdit">
            <el-button
                    size="mini"
                    type="success"
                    @click="handleBulkEdit()">Bulk Edit
            </el-button>
            <el-table
                    :data="keyValueList"
                    border
                    style="width: 100%"
                    max-height="180"
            >
                <el-table-column
                        prop="key"
                        label="Key"
                >
                    <template scope="scope">
                        <el-input v-model.trim="scope.row.key"
                                  placeholder="请输入key"
                                  @change="handleCellChange(scope.row.key)"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="value"
                        label="Value"
                >
                    <template scope="scope">
                        <el-input v-model.trim="scope.row.value"
                                  placeholder="请输入value"
                                  @change="handleCellChange(scope.row.value)"
                        ></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        label=""
                        fixed="right"
                >
                    <template scope="scope">
                        <el-button v-if="scope.row.key || scope.row.value"
                                   size="mini"
                                   type="danger"
                                   icon="el-icon-error"
                                   @click="handleDelete(scope.$index, scope.row)">
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
</script>

<script>
    Vue.component('cc-key-value', {
        template: '#cc-key-value-template',
        data() {
            return {
                bulkEdit: true,
                keyValueEdit: false,
                search: '',
                keyValueList:[]
            }
        },
        props: {
            data: {
                type: String
            }
        },
        computed: {

        },
        watch: {
            keyValueList: {
                deep: true,
                handler: function (newVal, oldVal) {
                    if (newVal) {
                        console.log('改变了'+ JSON.stringify(newVal))
                        this.data = this.convertTableDataList2KeyValStr(newVal)
                        this.$emit('data-change', this.data)
                    }
                }
            }
        },
        methods: {
            convertKeyValStr2TableDataList(keyValueStr){
                var result = [];
                if (keyValueStr === '') {
                    var temp = {key: '', value: ''};
                    result.push(temp)
                    return result;
                }
                var list = keyValueStr.split("\n");
                var index = 0;
                var size = list.length;
                for (; index < size; index++) {
                    var pair = list[index];
                    if (pair === '') {
                        continue;
                    }
                    var keyVal = new Array();
                    keyVal = pair.split(":");
                    if (keyVal[0] !== '' || keyVal[1] !== '') {
                        var obj = {};
                        obj.key = keyVal[0];
                        obj.value = keyVal[1];
                        result.push(obj);
                    }
                }
                result = this.getFinalKeyValList(result);
                return result;
            },

            convertTableDataList2KeyValStr(keyValueList){
                var index = 0;
                var size = keyValueList.length;
                var temp = [];
                for (; index < size; index++) {
                    var keyVal = keyValueList[index];
                    var tempStr = keyVal.key + ":" + keyVal.value;
                    if (tempStr === ':') {
                        continue;
                    }
                    temp.push(tempStr);
                }
                return temp.join("\n")
            },
            handleChange() {
                this.keyValueList = this.convertKeyValStr2TableDataList(this.data);
            },
            handleKeyValueEdit() {
                this.bulkEdit = false;
                this.keyValueEdit = true;
            },
            handleBulkEdit() {
                this.keyValueEdit = false;
                this.bulkEdit = true;
            },

            handleCellChange(changeVal) {
                if (changeVal) {
                    let last = this.keyValueList.pop();
                    this.keyValueList.push(last);
                    if (!(last.key === '' && last.value === '')) {
                        let temp = {key: '', value: ''};
                        this.keyValueList.push(temp);
                    }
                }
            },
            handleDelete(index, row) {
                let length = this.keyValueList.length;
                if (length > 0) {
                    if (index === 0) {
                        this.keyValueList = this.keyValueList.slice(1, length);
                    } else {
                        this.keyValueList = [].concat(this.keyValueList.slice(0, index),this.keyValueList.slice(index+1, length));
                    }
                }
            }

        },
        mounted() {
             this.keyValueList = this.convertKeyValStr2TableDataList(this.data)
        },
        created() {
        }
    })
</script>